<template>
  <div @touchmove.prevent v-if="show"  class="card-list">

      <div class="list" >
        <cube-scroll>
          <div class="card" @click="click(card)" v-for="(card,index) in list" :key="index">
            <div class="left">
              <div class="info">{{card.info}}</div>
              <div class="time">有效期至 {{card.expireTime}}</div>
            </div>
            <div class="right">
              <div class="price"><span>￥</span>{{card.mount}}</div>
              <div class="desc">换购券</div>
              <div class="sel">
                <img v-if="card.sel" src="./yes.png" alt="">
                <img v-else src="./no.png" alt="">
              </div>
            </div>
          </div>
        </cube-scroll>
      </div>

    <div class="total" style="margin-top: 10px">{{total}}</div>
    <div class="confirm" @click="confirm">
      确认
    </div>


  </div>
</template>

<script>
export default {
  data(){
    return {

    }
  },
  methods:{
    click(card){
      // console.log('--><')
      // card.sel = !card.sel
      this.$set(card,"sel", !card.sel)

    },
    confirm(){
      this.$emit("change",this.selIds)
      this.$emit("update:show",!this.show)
    }
  },
  computed:{
    selIds(){
      return this.list.filter(l=>l.sel).map(l=>l.id)
    },
    total(){
     let total = 0
       this.list.forEach(l=>{
        if(l.sel){
          total+=l.mount
        }
      })
      return total.toFixed(2)
    }
  },
  props:{
    list:Array,
    show:Boolean
  }
}
</script>

<style scoped lang="stylus">
  .card-list
    background-color #F4F3F3
    z-index 1000
    position fixed
    top 0
    right 0
    left 0
    bottom -60px
    display flex
    align-items center
    flex-direction column
    padding 20px 20px
    .list
        width 100%
        height 100% - 20px
        overflow hidden
      .card
        background-color #F6DBDB
        width 100%
        height 110px
        display flex
        align-items center
        border-radius 10px
        margin-bottom 10px
        .left
          padding-left 15px
          display flex
          flex-direction column
          flex 1
          .info
            margin-bottom 10px
            font-weight: bold;
            font-size 14px
            color: #333333;
            line-height: 18px;
            min-height 31px
          .time
            font-weight: 500;
            color: #999999;
            line-height: 18px;
            font-size 11px
        .right
          width 80px
          border-left 1px dotted #FDA59E
          display flex
          flex-direction column
          align-items center
          .price
            font-weight: bold;
            color: #FE4B38;
            line-height: 18px;
            font-size 28px
            margin-bottom 8px
            span
              font-size 14px
          .desc
            font-size 11px
            color #999999
            margin-bottom 18px
          .sel
            width 16px
            height 16px
            img
              height 100%
              width 100%




    .confirm
      position fixed
      bottom 20px
      height 40px
      width 200px
      font-size 18px
      color white
      display flex
      align-items center
      justify-content center
      background-color red
      border-radius 50%px
</style>